CSS @container: Konteineripäringute valdamine kaasaegses responsiivses disainis

Pidevalt arenevas veebidisaini maastikul on tõeliselt responsiivsete liideste saavutamine, mis kohanduvad oma vahetu keskkonnaga, mitte ainult vaateavaga, olnud kauaaegne püüdlus. Ajalooliselt on CSS meediapäringud olnud responsiivse disaini nurgakiviks, võimaldades meil kohandada stiile vastavalt brauseriakna mõõtmetele. See lähenemine seab aga piirangud üksikute komponentide stiliseerimisel suuremas paigutuses. Siin tulebki mängu CSS @container, võimas uus reegel, mis muudab meie lähenemist responsiivsele disainile, võimaldades konteineripäringuid.

Vaatepõhise responsiivsuse piirangud

Aastaid on veebisaitide responsiivseks muutmise peamine meetod tuginenud vaatepõhistele meediapäringutele. Need päringud, nagu näiteks @media (min-width: 768px), võimaldavad arendajatel rakendada erinevaid stiile sõltuvalt brauseriakna laiusest. See on olnud uskumatult tõhus, et luua paigutusi, mis kohanduvad sujuvalt erinevate ekraanisuurustega, alates suurtest lauaarvuti monitoridest kuni väiksemate mobiilseadmeteni.

Kujutage aga ette stsenaariumi, kus teil on komponent, näiteks toote kaart või külgriba vidin, mida on vaja kuvada erinevalt sõltuvalt sellest, kui palju ruumi see keerulisemas paigutuses enda alla võtab. Ainult vaatepõhiste meediapäringutega muutub selle komponendi tõhus stiliseerimine keeruliseks. Kui toote kaart ilmub laia, mitmeveerulise paigutusega lauaarvutil, võib see vajada teistsugust esitlust kui siis, kui see ilmub kitsa, üheveerulise paigutusega tahvelarvutil, isegi kui üldine vaateava laius jääb samaks. See on sellepärast, et komponendi optimaalse renderduse dikteerib selle konteiner, mitte ainult globaalne vaateava suurus.

Vajadus komponenditasemel responsiivsuse järele on viinud lahendusteni, mis hõlmavad sageli JavaScripti elemendi mõõtmete mõõtmiseks ja klasside rakendamiseks või keerulist CSS-i pesastamist, mis võib muutuda hallatamatuks. CSS @container eesmärk on need probleemid lahendada, pakkudes natiivset CSS-lahendust.

Tutvustame CSS @containerit: Konteineripäringu reegel

CSS @container tutvustab konteineripäringute kontseptsiooni. Selle asemel, et pärida vaateava omadusi, võimaldavad konteineripäringud meil pärida elemendi eellaskonteineri omadusi, mis on selgesõnaliselt määratletud päringukonteinerina.

Mõelge sellest nii: selle asemel, et küsida "Kui lai on brauseriaken?", saame nüüd küsida "Kui lai on element, mis seda komponenti sisaldab?" See nihutab fookuse globaalselt kontekstilt (vaateava) lokaalsele kontekstile (vanemelement või määratud konteiner).

Päringukonteineri määratlemine

Konteineripäringute kasutamiseks peate esmalt määrama HTML-elemendi päringukonteineriks. See saavutatakse omaduse container-type abil. See omadus annab brauserile teada, et seda elementi tuleks pidada selle järeltulijaid sihtivate konteineripäringute tugipunktiks.

Kõige levinum väärtus container-type jaoks on normal. Stiilimise eesmärgil kasutate aga sageli väärtusi inline-size või size.

• container-type: normal;: See on vaikeväärtus. See loob päringukonteineri, kuid ei loo tingimata uut sisaldavat plokki positsioneerimiseks ja ei võimalda vaikimisi suurusepäringuid. Täieliku funktsionaalsuse saavutamiseks peate seda tavaliselt kombineerima teiste omadustega.
• container-type: inline-size;: See on kõige sagedamini kasutatav väärtus responsiivsete komponentide jaoks. See loob päringukonteineri, mida saab pärida selle inline-mõõtme (laius horisontaalsetes kirjutusrežiimides või kõrgus vertikaalsetes kirjutusrežiimides) alusel. See sobib ideaalselt komponentidele, mis peavad kohanema oma horisontaalse ruumiga.
• container-type: size;: See loob päringukonteineri, mida saab pärida nii selle inline-mõõtme kui ka ploki mõõtme (kõrgus horisontaalsetes kirjutusrežiimides, laius vertikaalsetes kirjutusrežiimides) alusel. See on kasulik komponentidele, mis peavad kohanema nii laiuse kui ka kõrguse piirangutega.

Saate määrata ka konteineri nime, kasutades omadust container-name. See võimaldab teil sihtida konkreetseid konteinereid, kui teil on komponendipuus mitu päringukonteinerit, vältides soovimatut stiilimist.

Näide: päringukonteineri seadistamine

            
.product-card-container {
  container-type: inline-size;
  container-name: product-card;
  width: 50%; /* Konteineri enda näidislaius */
  margin: 20px;
  border: 1px solid #ccc;
  padding: 15px;
}

            

              
                Copy
              
            
          

Selles näites on klassiga .product-card-container element nüüd päringukonteiner nimega 'product-card' ja selle inline-suurust (laiust) saab pärida.

Konteineripäringute kirjutamine

Kui element on määratud päringukonteineriks, saate kasutada @container reeglit, et rakendada selle järeltulijatele stiile vastavalt konteineri omadustele. Süntaks sarnaneb meediapäringutega, kuid kasutab märksõna container asemel media.

Süntaks:

            
@container [<name> | <family>] <condition> {
  /* Rakendatavad CSS reeglid */
}

            

              
                Copy
              
            
          

• [<name> | <family>] (Valikuline): Määrab päritava konteineri nime või perekonna. Kui see on välja jäetud, päritakse mis tahes konteinerit, millel on määratletud container-type.
• <condition>: Siin määrate konteineri omadused, mida soovite pärida. Levinud tingimused on width, height, inline-size, block-size, aspect-ratio, orientation ja resolution.

Näide: stiilide rakendamine tootekardile selle konteineris

            
.product-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Konteineri nimega 'product-card' pärimine */
@container product-card (min-width: 400px) {
  .product-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .product-card img {
    margin-right: 20px;
    margin-bottom: 0;
  }
}

@container product-card (min-width: 600px) {
  .product-card {
    padding: 30px;
  }

  .product-card h3 {
    font-size: 1.8em;
  }
}

            

              
                Copy
              
            
          

Selles põhjalikus näites:

• .product-card-container on seatud päringukonteineriks.
• Selles asuv element .product-card saab vaikestiilid.
• Kui .product-card-container on 400 pikslit lai või laiem, lülitub .product-card reapaigutusele, joondab teksti vasakule ja kohandab pildi marginaale.
• Kui .product-card-container on 600 pikslit lai või laiem, kohandatakse .product-card polsterdust ja pealkirja fondi suurust veelgi.

See näitab, kuidas üks komponent saab kohandada oma sisemist paigutust ja stiili, tuginedes ainult oma vanemkonteineris saadaolevale ruumile, ilma et see sõltuks üldisest vaateava suurusest.

Konteineripäringute peamised omadused ja funktsioonid

Lisaks põhilisele @container reeglile ja container-type'ile on mitmeid teisi seotud omadusi ja funktsioone, mis suurendavad konteineripäringute võimsust:

1. container-name

Nagu varem mainitud, võimaldab container-name määrata päringukonteinerile unikaalse identifikaatori. See on ülioluline, kui teil on lehel pesastatud komponente või mitu sõltumatut komponenti, millest igaühel võib olla oma konteineripäringu määratlus.

Näide:

            
.sidebar {
  container-type: inline-size;
  container-name: sidebar-queries;
}

.main-content {
  container-type: inline-size;
  container-name: main-content-queries;
}

@container sidebar-queries (min-width: 200px) {
  /* Stiilid külgriba konteineris olevatele elementidele */
}

@container main-content-queries (min-width: 700px) {
  /* Stiilid põhisisu konteineris olevatele elementidele */
}

            

              
                Copy
              
            
          

2. Erinevate konteineri telgede pärimine

Konteineripäringud võivad sihtida mitte ainult konteineri inline- (tavaliselt laius), vaid ka ploki- (tavaliselt kõrgus) mõõtmeid. See on eriti kasulik komponentidele, mis peavad kohanema nii laiuse kui ka kõrguse piirangutega.

• width / inline-size: Päringud konteineri horisontaalse mõõtme alusel.
• height / block-size: Päringud konteineri vertikaalse mõõtme alusel.
• aspect-ratio: Päringud konteineri laiuse ja kõrguse suhte alusel.
• orientation: Päringud selle alusel, kas konteineri inline-size on suurem või võrdne selle block-size'iga (portrait) või väiksem (landscape).

Näide block-size kasutamisest:

            
.chart-container {
  container-type: size;
  container-name: chart;
  height: 300px;
}

.chart {
  /* Diagrammi vaikestiilid */
}

@container chart (min-height: 250px) {
  .chart {
    /* Kohandused kõrgemate diagrammide jaoks */
    font-size: 1.1em;
  }
}

@container chart (orientation: landscape) {
  .chart {
    /* Kohandused laiemate-kui-kõrgete diagrammide jaoks */
    transform: rotate(90deg);
  }
}

            

              
                Copy
              
            
          

3. Konteineripäringute ühikud

Konteineripäringud toovad sisse uued CSS-ühikud, mis on suhtelised päringukonteineri mõõtmetega, sarnaselt vaateava ühikutega (vw, vh), kuid spetsiifilised konteinerile.

• cqw: 1% konteineri inline-suurusest.
• cqh: 1% konteineri ploki-suurusest.
• cqi: Võrdne cqw-ga.
• cqb: Võrdne cqh-ga.
• cqmin: Väiksem väärtus cqi või cqb hulgast.
• cqmax: Suurem väärtus cqi või cqb hulgast.

Need ühikud on uskumatult võimsad tihedalt seotud komponendistiilide loomiseks, mis skaleeruvad proportsionaalselt oma konteineritega.

Näide:

            
.product-card-container {
  container-type: inline-size;
}

.product-card h3 {
  font-size: 2.5cqi; /* Fondi suurus skaleerub konteineri inline-suurusega */
  margin-bottom: 1cqi;
}

.product-card p {
  font-size: 1.2cqi;
}

            

              
                Copy
              
            
          

Selles näites kohanduvad .product-card sees oleva pealkirja ja lõigu fondi suurused automaatselt vastavalt nende vanemkonteineri laiusele, tagades loetavuse erinevate komponendi suuruste puhul.

4. Omadus contain (ja selle seos container-type'iga)

CSS-i omadus contain ei ole otseselt osa konteineripäringu süntaksist, kuid on väga asjakohane. See annab brauserile teada elemendi sisust, et aidata brauseril renderdamist optimeerida. Kui määrate container-type väärtuseks inline-size või size, viitab see teatud tüüpi sisaldumisele. Brauser teab, et selle konteineri sees olevad stiilid sõltuvad selle suurusest ja ei pea konteineri suuruse muutumisel lehe mitteseotud osi uuesti renderdama.

Täpsemalt on container-type: inline-size; lühend, mis seab kaudselt contain: layout style inline-size;. See on oluline jõudluse optimeerimine.

Praktilised kasutusjuhud ja globaalsed näited

Konteineripäringute mitmekülgsus muudab need rakendatavaks paljudes stsenaariumides, eriti globaalsetele sihtrühmadele, kus erinevad paigutused ja seadmekontekstid on tavalised.

1. Responsiivsed navigeerimismenüüd

Navigatsioonielemendid peavad sageli kohanema horisontaalsest loendist suurtel ekraanidel kokkuvariseva hamburgerimenüüni väiksematel ekraanidel. Konteineripäringutega saab navigatsioonikomponendi paigutada paindlikku külgribasse või päisesse ja see saab iseseisvalt kohandada oma paigutust vastavalt selle külgriba või päise laiusele, olenemata üldisest vaateava suurusest.

Globaalne stsenaarium: Kujutage ette rahvusvahelist e-kaubanduse saiti, kus tootekategooriaid võidakse kuvada Euroopas lauaarvuti külgribal, kuid Aasias mobiilseadme kitsamas osas. Konteineriteadlik navigatsioonikomponent tagab, et see kuvatakse alati optimaalselt oma vahetus kontekstis.

2. Kohanduvad kasutajaliidese komponendid (nupud, kaardid, vormid)

Levinud kasutajaliidese elemendid nagu nupud, kaardid ja vormiväljad saavad sellest tohutult kasu. Toote kaart võib kuvada detaile kõrvuti, kui selle konteiner on lai, kuid paigutada need vertikaalselt, kui konteiner on kitsas. Nupp võib muuta oma polsterdust või teksti suurust.

Globaalne stsenaarium: Reisibroneerimisplatvorm võib kuvada lennuandmeid kompaktses kaardiformaadis otsingutulemuste loendis. Kui see loend paigutatakse tahvelarvuti kitsasse külgribasse, peaks kaart oma paigutust kohandama, et olla vertikaalsem. Kui see on laiemas põhisisu alas, saab see kuvada rohkem teavet horisontaalselt.

3. Keerulised paigutused ja armatuurlauad

Mitme vidinaga armatuurlauad või keerulised artiklipaigutused saavad kasu komponentidest, mis suudavad ümber voolata ja stiili muuta vastavalt veerule, kus nad asuvad. See võimaldab teabe esitluse üle peenemat kontrolli.

Globaalne stsenaarium: Finantsuudiste armatuurlaual võiks olla mitu vidinat, mis kuvavad aktsiate sümboleid, turuanalüüsi ja uudisvooge. Iga vidin võib olla päringukonteiner, tagades, et sümboli kuva, diagrammi responsiivsus või uudisklipi pikkus kohanduvad õigesti vastavalt sellele vidinale armatuurlaua ruudustikus eraldatud laiusele.

4. Prindistiilid ja eksporditud sisu

Kuigi meediapäringuid kasutatakse tavaliselt printimiseks, võivad konteineripäringud aidata hallata ka komponentide stiili, kui sisu eksporditakse või prinditakse, tagades järjepidevuse vastavalt 'konteinerile' (nt prindistiililehe konkreetne lehe laius).

5. Disainisüsteemid ja korduvkasutatavad komponendid

Konteineripäringud on disainisüsteemide jaoks mängumuutjad. Arendajad saavad luua tõeliselt iseseisvaid ja korduvkasutatavaid komponente, mida ei pea spetsiaalselt iga võimaliku paigutuse jaoks kohandama. Komponendi stiil on olemuslikult seotud selle konteineriga, muutes selle ennustatavamaks ja lihtsamini rakendatavaks erinevates projektides ja kontekstides.

Globaalne stsenaarium: Globaalne korporatsioon, mis ehitab uut siseportaali, saab kasutada disainisüsteemi, millel on konteineriteadlikud komponendid. Näiteks nupukomponenti saab kujundada nii, et see näeks hea välja nii kitsas modaalaknas, laias jaluses kui ka standardses vormiväljas, ilma et oleks vaja iga stsenaariumi jaoks spetsiifilisi klasse.

Veebilehitsejate tugi ja rakendamine

Konteineripäringud on suhteliselt uus CSS-i funktsioon. Kuigi brauseritugi paraneb kiiresti, on oluline kontrollida uusimaid ühilduvustabeleid tootmises kasutamiseks.

• Chrome/Edge: Tugi on olnud saadaval juba mõnda aega, algselt nõudes sageli lippu, kuid on nüüd laialdaselt toetatud.
• Firefox: Tugi on saadaval.
• Safari: Tugi on saadaval.
• Muud brauserid: Tugi kasvab, kuid kontrollige alati oma sihtrühma jaoks.

Brauserite jaoks, mis ei toeta konteineripäringuid, peate rakendama varustrateegia. See hõlmab sageli JavaScripti kasutamist toe tuvastamiseks ja traditsioonilisema vaatepõhise responsiivse kogemuse pakkumist või vanemate CSS-tehnikate kasutamist.

Varustrateegia näide (kontseptuaalne):

            
.product-card-container {
  container-type: inline-size;
  /* Komponendi vaikestiilid */
  display: flex;
  flex-direction: column;
}

/* Varumeetod meediapäringutega brauseritele, mis ei toeta konteineripäringuid */
@media (min-width: 400px) {
  .product-card-container {
    /* Stiilid, mis on samaväärsed @container (min-width: 400px) stiilidega */
    flex-direction: row;
  }
}

/* Konteineripäringuspetsiifilised stiilid */
@container (min-width: 400px) {
  .product-card-container {
    /* Spetsiifilised stiilid, kui konteiner on 400px+ */
    /* Need kirjutavad meediapäringu varumeetodi üle, kui seda toetatakse */
  }
}

            

              
                Copy
              
            
          

Üldine lähenemine on lasta konteineripäringutel eelistada, kui neid toetatakse, ja pakkuda vanematele brauseritele vähem granuleeritud, kuid siiski funktsionaalset responsiivset kogemust meediapäringute kaudu.

Parimad praktikad ja näpunäited konteineripäringute kasutamiseks

Et kasutada konteineripäringute täit võimsust tõhusalt ja säilitada robustset, hooldatavat koodibaasi:

• Määratlege konteinerid selgesõnaliselt: Seadke alati container-type elementidele, mis peaksid toimima päringukonteineritena. Ärge lootke kaudsele käitumisele.
• Kasutage nimesid selguse huvides: Kasutage container-name, kui tegelete pesastatud või mitme sõltumatu konteineriga, et vältida nimekonflikte ja tagada, et päringud sihivad õigeid elemente.
• Mõelge komponendipõhiselt: Kujundage ja ehitage oma komponente konteineripäringuid silmas pidades. Mõelge, kuidas nad käituvad erinevate konteineri suuruste puhul.
• Kasutage konteineripäringute ühikuid targalt: cqw, cqh jne on võimsad skaleeritavate komponentide jaoks. Kasutage neid fondi suuruste, vahede ja muude mõõtmete jaoks, mis peaksid proportsionaalselt kohanema.
• Kombineerige meediapäringutega: Konteineripäringud ei asenda kõiki meediapäringuid. Kasutage meediapäringuid üldise lehe paigutuse, kogu saidi tüpograafia ja juurdepääsetavuse funktsioonide jaoks ning konteineripäringuid komponenditasemel responsiivsuse jaoks.
• Testige põhjalikult: Testige oma komponente erinevates konteineri suurustes ja brauserikeskkondades, et tagada nende ootuspärane käitumine. Muutke oma brauseriakna suurust, kasutage arendaja tööriistu erinevate elemendi suuruste simuleerimiseks ja kontrollige ühilduvust.
• Arvestage jõudlusega: Kuigi konteineripäringud võivad parandada jõudlust, eraldades stiilid, olge teadlik liiga keerulisest pesastamisest või liiga paljudest päringukonteineritest, kui neid ei hallata õigesti.
• Progressiivne täiustamine: Veenduge, et teie sait jääb kasutatavaks ja esinduslikuks brauserites, mis ei toeta konteineripäringuid, pakkudes sujuvaid varumeetodeid.

Kokkuvõte: Responsiivse disaini uus ajastu

CSS @container kujutab endast märkimisväärset sammu edasi responsiivses veebidisainis. Võimaldades arendajatel luua stiile, mis on komponenditasemel kontekstiteadlikud, avavad konteineripäringud uue taseme disaini paindlikkuses ja modulaarsuses. See võimaldab luua tõeliselt kohanduvaid liideseid, mis on robustsemad, lihtsamini hooldatavad ja paremini sobivad mitmekesisele seadmete ja paigutuste valikule, millega globaalne publik kokku puutub.

Kuna brauseritugi jätkab küpsemist, muutub konteineripäringute kasutuselevõtt üha olulisemaks kaasaegsete, keerukate ja universaalselt ligipääsetavate veebikogemuste loomisel. Võtke see võimas tööriist omaks ja defineerige uuesti, kuidas lähenete responsiivsele disainile tõeliselt ühendatud maailmas.